<template>
  <view class="con">
    <view class="tuijian">
      <view class="tuijianli flex flex_between" v-for="(item,index) in courseList"  @click="goProductDetail(item)">
        <!-- 左边 -->
        <view class="tuijianliz">
          <view class="remenList_lic flex">
            <view class="remenList_lic1">{{item.title}}</view>
           <!-- <image class="remenList_lic12" mode="widthFix" src="/static/index/img39.jpg" v-if="item.huo!=='0'"></image> -->
          </view>
          <view class="remenList_linav">{{item.desc}}</view>
        </view>
        <!-- 右边 -->
        <image class="tuijian_right" mode="widthFix" :src="item.pic"></image>
      </view>
    </view>
  </view>
</template>

<script>
  import {
  	getCourseMycourse //获取我的课程
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'),
        // openid: 'oycWz5SBi1rMTuqdQhLy4iSvgHjU', //获取缓存的openid
        isLogin: uni.getStorageSync('isLogin') || 1, //是否登录授权 1是未授权；2是已授权
        // url:'https://y05kifbrzw0.feishu.cn/docx/Gdz0dpSX5o8Yl0x4BhDc5ObKnu1',
        page:1,//页码
        courseList:[],
        total:0,//总共的数量
        pagesizes:15,//每页数量
        remenList: [{
            title: '涨粉计划',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '闲鱼宝藏',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '搭子部落',
            con: '50%起佣金，保姆级陪跑'
          },
          {
            title: '京东带货',
            con: '50%起佣金，保姆级陪跑'
          }
        ]
      };
    },
    onLoad() {
      this.getCourseMycourseFun() //获取我的课程
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    methods:{
      // 获取我的课程
      getCourseMycourseFun(){
        let param = {
          openid:this.openid,
          page:this.page
        }
        getCourseMycourse(param).then(res=>{
          console.log('获取我的课程')
          console.log(res)
          if(res.error_code===0){
            this.total = Number(res.data.total);
            this.pagesizes = Number(res.data.pagesizes);
            let listRe = res.data.arrList
            if(listRe.length>0){
              this.courseList = this.courseList.concat(listRe);
            }
          }else{
            uni.showToast({
            	icon: 'none',
            	title: res.msg
            })
          }
        })
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getCourseMycourseFun()
      },
      // 点击"复制"
      copyText(url){
        uni.setClipboardData({
          data: url,
          success: function () {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      },
      // 进入-产品详情页
      goProductDetail(item) {
        console.log(item)
      	uni.navigateTo({
      		url: '/pages/shiZhanDe/index?id=' + item.course_id
      	})
      },
    }
  }
</script>

<style scoped lang="scss">
.main{
  width: 100%;
  height: auto;
  border-radius: 20rpx;
  background-color: rgba(255,255,255,1);
  padding: 40rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
  .main_1{
    width: auto;
    height: 76rpx;
    margin-bottom: 36rpx;
    .main_1z{
      background-color: rgba(249,191,65,1);
      height: 76rpx;
      line-height: 76rpx;
      padding-left: 26rpx;
      padding-right: 100rpx;
      color: rgba(16,16,16,1);
      font-size: 28rpx;
      font-weight: bold;
    }
    .main_1y{
      height: 76rpx;
       line-height: 76rpx;
      border-radius: 0px 100rpx 100rpx 0px;
      background-color: rgba(0,0,0,1);
      color: rgba(255,255,255,1);
      font-size: 24rpx;
      padding-left: 22rpx;
      padding-right: 40rpx;
      text{
        font-family: 'AvantGardeFont';
        font-size:40rpx;
      }
    }
  }
  .main_2{
    margin-bottom: 40rpx;
    .main_2_1{
      height: 40rpx;
      line-height: 40rpx;
      color: rgba(0,0,0,1);
      font-size: 28rpx;
      margin-bottom: 8rpx;
      align-items: normal;
      .main_2_1_v1{
        width: 120rpx;
        font-weight: bold;
      }
      .main_2_1_v2{
        width: 530rpx;
      }
    }
    .main_2_2{
      line-height: 40rpx;
      color: rgba(0,0,0,1);
      font-size: 24rpx;
      width: 100%;
      word-break: break-all;
    }
  }
  .main_3{
    width: 100%;
    height: auto;
    margin-bottom: 60rpx;
    .main_3z{
      width: 160rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 40px;
      background-color: rgba(249,191,65,1);
      color: rgba(0,0,0,1);
      font-size: 28rpx;
      text-align: center;
      margin-right: 32rpx;
    }
    .main_3y{
      color: rgba(0,0,0,1);
      font-size: 28rpx;
    }
  }
}
.tuijian{
    width: 100%;
    height: auto;
    .tuijianli{
      width: 100%;
      height: auto;
      padding: 40rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      margin-bottom: 30rpx;
      background: #fff;
      .tuijianliz{
        width: 80%;
        .remenList_lic{
          width: 100%;
          height: auto;
          margin-bottom: 8rpx;
          .remenList_lic1{
            width: auto;
            max-width: 300rpx;
            overflow: hidden;
            margin-right: 10rpx;
            font-size: 32rpx;
            font-weight: bold;
          }
          .remenList_lic12{
            width: 50rpx;
            height: auto;
            flex-shrink: 0;
            border-radius: 40rpx;
            position: relative;
            top: -10rpx;
          }
          
        }
        .remenList_linav {
          width: 100%;
          box-sizing: border-box;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(137, 137, 137, 1);
          font-size: 24rpx;
        }
      }
      .tuijian_right{
        width: 80rpx;
        height: auto;
        border-radius: 10rpx;
      }
    }
  }
</style>
